
// 商品详情页的实现,点击图片获取当前点击商品的信息中的id,
// 调用服务器的加入购物车的功能,并且将商品的id加入到localStorage中去,
// 使其可以实现,跨页面的获取商品的id,值,
// 下一步就是,判断服务器的状态==200时 跳转到商品详情的网页







class commodity {
	constructor() {
		// console.log(this.$('#commoditydata'));
		// 这个方法是获取服务器中的数据并渲染到页面中
		this.getData();

		// 获取ul的节点并给其绑定点击事件
		this.$('#commoditydata').addEventListener('click', this.addCart.bind(this))
		// 调用修改用户登入显示到页面中的方法
		this.dengRu();

		// 实现懒加载
		// 这里我们需要设置一个加载商品的页数
		this.yeShu = 1;

		//  这里需要在设置一个锁在控制懒加载时一次性触发多少懒加载的方法
		//  这里锁默认为关闭状态(false)
		this.suo = false;

		//    创建一个实现懒加载的方法  
		window.addEventListener('scroll', this.lanJiaZai)

		//  获取页面中分页的节点  给其绑定点击事件,这里是获取分页的父元素给父元素委托实现
		this.$('.pagination').addEventListener('click', this.fenYe);


	}


	// 分页的实现
	fenYe=(event)=>{
		// 这里获取页码的节点

	  let node=event.target;
	  console.log(node.innerHTML);
	//   这里我们设置一个页面可以出现的最多商品的数量的变量
	let num=4;
	  this.yeShu=num*((node.innerHTML)-1)+1;
	  console.log(this.yeShu);

	//   这里要实现,点击分页按钮清空页面中服务器追加的内容
	//   console.log(this.yeShu);
	  this.$('#commoditydata').innerHTML=' ';
	  this.lanJiaZai()

	//   console.log(node)
	}

	// ye = 1

	// // 分页的实现
	// fenYe = (event) => {
	// 	// 这里获取页码的节点

	// 	let node = event.target;
	// 	console.log(node.innerHTML);
	// 	//   这里我们设置一个页面可以出现的最多商品的数量的变量
	// 	let num = 4;
		
	// 	console.log(this.yeShu);

		
	// 	if (node.className != 'pn-next' && node.className != 'pn-prev') {
	// 		this.$('#commoditydata').innerHTML = '';
	// 		this.yeShu = num * ((node.innerHTML) - 1) + 1;
	// 		this.lanJiaZai()

	// 	} else if (node.className == 'pn-next') {
	// 		this.ye++;
	// 		console.log(this.ye);
	// 		this.$('#commoditydata').innerHTML = '';
	// 		this.yeShu++
	// 		this.lanJiaZai()
	// 	} else if (node.className == 'pn-prev') {
	// 		this.ye--;
	// 		this.yeShu--;
	// 		console.log(this.yeShu);
	// 		console.log(this.ye);
	// 		this.$('#commoditydata').innerHTML = '';
	// 		this.lanJiaZai()
	// 	}
	// }



	// ye = 1
	// fenye = (eve) => {
	// 	let node = eve.target
	// 	console.log(node);

	// 	//  获取node中的的内容
	// 	let content = node.innerHTML;
	// 	console.log(node.className == 'pn-next');
	// 	if (node.className != 'pn-next' && node.className != 'pn-prev') {
	// 		this.$('.sk_bd ul').innerHTML = '';
	// 		this.ye = this.currentPage * content
	// 		this.getData(this.ye)

	// 	} else if (node.className == 'pn-next') {
	// 		this.ye++;
	// 		console.log(this.ye);
	// 		this.$('.sk_bd ul').innerHTML = '';
	// 		this.getData(this.ye)
	// 	} else if (node.className == 'pn-prev') {
	// 		this.ye--;
	// 		console.log(this.ye);
	// 		this.$('.sk_bd ul').innerHTML = '';
	// 		this.getData(this.ye)
	// 	}
	// }









	// 登入的显示,我们这里可以判断localStorage中的nickname参数是否存在,吐过存在就表示用户已经登入
	// dengRu(){
	// 	// 获取页面中登入按钮的节点
	// 	let dengRu=document.querySelector('.dengRuZhuche')
	// 	console.log(dengRu);
	// let nickname=localStorage.getItem('nickname')
	// console.log(nickname);

	// 	if(nickname){
	// 		let html=`<a href="login.html" class="dengRu">${nickname}&nbsp已登入</a>`;
	// 		dengRu.innerHTML=html;
	// 	}
	// }


	//    创建一个修改用户登入显示到页面中的方法
	dengRu() {
		// 获取页面中登入按钮的节点
		let dengRu = document.querySelector('.dengRu')


		// 获取页面中注册的按钮
		let zhuChe = document.querySelector('.zhuChe')
		// 获取我们添加在localStorage中的nickname的值
		let nickname = localStorage.getItem('nickname')

		// 这里我们可以拼接一个用户头像图片的img标签
		let img = `<img src="./img/toxiang.webp" alt="" class="topian">`
		// 这里是判断nickname的值,是否存在,如果存在就表明用户已近登入,那就将登入按钮,改为已经登入的用户名
		if (nickname) {
			// 那就将登入按钮,改为已经登入的用户名
			dengRu.innerHTML = nickname;
			// 将注册按钮中的内容修改为一个用户的头像
			zhuChe.innerHTML = img

		}
	}


	// 创建建一个获取节点的方法
	$(ele) {
		let data = document.querySelectorAll(ele);
		// console.log('11111111');
		return data.length == 1 ? data[0] : data;
	}

	// 创建一个获取页面中ul节点的方法,用来获取服务器以后,向其中添加内容
	async getData(num = 1) {
		//  向服务器发送get请求 ,
		// 这里使用 async 和await 结合使用可以将 async函数内的异步的代码,转换为同步的代码
		// 这里使用解构赋值的方法,来获取服务器的返回值中的属性
		let { status, data } = await axios.get('http://localhost:8888/goods/list?current=' + num);

		// 这里是判断服务器的状态 和 数据获取的状态
		// if( data.code==1 || status==200) throw new Error('服务器数据获取不成功')
		// 这里是获取服务器中的数据(data.list).并以forEach循环的方式输出 data.list保存着我们需要的数据
		// 这里创建一个属性来存储服务器返回的数据的内容 ,用来拼接到页面中
		let html = '';

		data.list.forEach((goods) => {

			html += `<li class="sk_goods body-box" id=${goods.goods_id}>
	<a href="#none" class="body-box-img">
		<img src="${goods.img_big_logo}" alt="" id="tupain">
	</a>
	<h5 class="sk_goods_title box-name">${goods.title}</h5>
	<p class="sk_goods_price body-box-rmb">
		<em>¥${goods.current_price}</em>
		<del>￥${goods.price}</del>
	</p>

	<a href="#none" class="sk_goods_buy">立即抢购</a>
</li>`
		})

		//  创建一个获取页面中ul节点的方法,用来获取服务器以后,向其中添加内容

		if (((this.yeShu) % 4) != 0) {

			this.$('#commoditydata').innerHTML += html;
		}

		this.yeShu++;
		console.log(this.yeShu);

		// 在这里调用点击商品中除了加入购物车的按钮时就跳转到商品的详情页面的方法
		this.tiaoZhuangoods()
	}


	addCart(event) {
		// 这里进行事件委托,将事件委托给父元素,点击点击父元素中的任意的元素,父元素都可以感觉得到
		//   获取点击提交的节点
		let eve = event.target;
		// console.log(eve);	
		// 这里进行判断点击的是  点击提交按钮的节点
		if (eve.nodeName != 'A' && eve.className != 'sk_goods_buy') {

			return;
		}

		// 获取localStorage中保存的值
		// 判断用户是否登录,如果local中有token,表示登录,没有则表示未登录
		let token = localStorage.getItem('token');

		// 这里是判断用户是否已经登入过,如果没有就跳转到登入页面,如果有就进行加入购物车的操作
		if (!token) {
			location.assign('./login.html#returnUrl=./product.html');
		}


		// 获取用户的id和商品的id
		// 第一步获取商品的id  也就是li的id   因为我们已经获取到了 a 点击提交的节点,其的父节点就是li

		if (eve.nodeName == 'A' && eve.className == 'sk_goods_buy') {

			// 这里就是获取到了商品的id
			let liObj = eve.parentNode;
			// 下面我们就可以获取商品上的id值了
			this.id = liObj.id;
		}

		// 获取用户的id我们可以使用 localStorage.getItem("user_id")来获取
		let user_id = localStorage.getItem('user_id');

		// 这里我们就调用加入购物车的方法
		this.getShopping(this.id, user_id)
	}

	// 创建一个放入到购物车的代码使用post请求
	getShopping(Gid, Uid) {
		const AUTH_TOKEN = localStorage.getItem('token')
		axios.defaults.headers.common['authorization'] = AUTH_TOKEN;

		//     headers['Content-Type']  也是 给 headers 对象中添加属性,只是. 语法不支持 Content-Type
		axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';



		let param = `id=${Uid}&goodsId=${Gid}`;
		// 使用post请求我们就需要设置请求头来,设置请求的格式,不设置的话默认是JSON格式的,我们想要form形式
		//   这里是要给服务器传递一个用户的秘钥  也就是我们添加在localStorage中的token的值  
		// 我们用AUTH_TOKEN来保存并传递到服务器中	
		// 这里是设置post的请求头		
		axios.post('http://localhost:8888/cart/add', param)
			.then(({ data, status }) => {
				// console.log(data ,status);
				if (data.code == 1 && status == 200) {
					// 这使用了一个插件来,让页面可以显示出一个模态框
					layer.open({
						// 这里是模态框的标头
						title: '在线调试'
						// 这里是内容
						, content: '配置各种参数，试试效果'
						// 这里是按钮的
						, btn: ['先不看', '公子,您的物品在等你']
						//  这里是点击第二按钮的回调函数
						, btn2: function () {
							// 这里是当点击第二个按钮就跳转页面
							location.assign('./cart2.html');
						}
					});
				} else if (data.code = 401 && status == 200) {
					// 这里主要是判断,当数据的状态==401的时候,也就表示我们登入已经过期了,需要重新登入
					// 这里是登入之前,删除我们登入成功 以后添加到localStorage中的数据 ,并跳转到登入页面
					localStorage.removeItem('token');
					localStorage.removeItem('user_id')
					// 这里是跳转到登入页面
					location.assign('./login.html#returnUrl=./product.html');

				} else {
					// 这里是当上面的条件都不成立的话,就执行这里的代码
					layer.open({
						title: '失败提示框'
						, content: '大爷,你走措地了'
						, time: 3000
					});

				}
			})

	}


	//   调用懒加载的方法
	lanJiaZai = () => {
		//   第一步获取滚动条的高度
		let gunDongHeight = document.documentElement.scrollTop;
		//    第二步获取可视区的高度
		let keShiQuHeight = document.documentElement.clientHeight;
		// 第三步获取整个内容的高度
		let zhengTiHeight = document.querySelector('#commoditydata').offsetHeight;
		zhengTiHeight = zhengTiHeight + 400;
		// 这里进行判断一下当前滚动条滚动是否已经超过内容的高度
		if ((gunDongHeight + keShiQuHeight) > zhengTiHeight) {
			// 使用一下节流和防抖的原理,防止多次触发懒加载
			// 这里是如果锁的状态为(开启)true就结束代码运行			
			if (this.suo) return;
			this.suo = true;
			// 设置一个延时器,没过1000毫秒就就锁的状态该为关闭
			setTimeout(() => {
				this.suo = false;
			}, 1000)
			// 这里是当触发一次懒加载就调用一次从服务器中获取数据的方法
			// 这里我们也可以让页面只加载 我们想要的次数 ,这里就需要设置,页面的页数了
			//   
			if (this.yeShu % 4 == 0) return  //这里是当页面已经加载五次以后就结束代码的运行   
			//  这里是每次调用就让页面的页数自增1
			this.getData(this.yeShu);
			console.log(this.yeShu);
		}
	}











	// 这里我们还是创建一个方法吧,在下面无法成功
	tiaoZhuangoods() {
		// 这里获取所有商品的节点
		let goods = this.$('.body-box')
		// 这里获取到的节点是一个集合,我们需要循环出每一次商品,并给其绑定一个点击事件

		goods.forEach(key => {
			// 给每一件商品绑定点击事件
			key.onclick = (ele) => {
				// 这里使用事件委托,当子元素触发事件时,父元素,也能感觉到
				let eve = ele.target
				// 这里是判断当点击的按钮不是 那个立即抢购的按钮的话就执行其中的代码
				if (eve.nodeName != 'A' && eve.className != 'sk_goods_buy') {
					// 获取点击商品的id
					//  console.log(key);
					// 这里是获取当前被点击按钮所在的 商品的id值
					let gid = key.id;
					// 这里我们将获取到的商品的id存储到localStorage中,实现可以跨页面的操作
					localStorage.setItem('gid', gid);
					//   这里是跳转页面,跳转到商品详情的页面中去
					location.assign('./shopping.html');
					//  这里当页面跳转以后,就执行代码运行
					return;
				}
			}

		})
	}

}
// 创建类的实例化对象
new commodity;
